<template>
  <div class="font-inter bg-neutral-900 text-white">
    <Header />
    <!-- 使用ScrollReveal组件包裹每个部分 -->
    <ScrollReveal :threshold="0.1">
      <template #content>
        <section id="message-cloud" class="py-20 px-4 md:px-8 bg-neutral-800/50">
          <MessageCloud />
        </section>
      </template>
      <template #skeleton>
        <section class="py-20 px-4 md:px-8 bg-neutral-800/50">
          <div class="container mx-auto">
            <div class="mb-12">
              <div class="h-10  rounded-md skeleton mb-4"></div>
              <div class="h-6 rounded-md skeleton"></div>
            </div>
            <div class="h-[400px] rounded-lg skeleton"></div>
          </div>
        </section>
      </template>
    </ScrollReveal>

    <ScrollReveal :threshold="0.1">
      <template #content>
        <section id="active-members" class="py-20 px-4 md:px-8 bg-neutral-900">
          <ActiveMembers />
        </section>
      </template>
      <template #skeleton>
        <section class="py-20 px-4 md:px-8 bg-neutral-900">
          <div class="container mx-auto">
            <div class="mb-12">
              <div class="h-10 w-48 rounded-md skeleton mb-4"></div>
              <div class="h-6 w-86 rounded-md skeleton"></div>
            </div>
            <div class="h-[400px] rounded-lg skeleton"></div>
          </div>
        </section>
      </template>
    </ScrollReveal>

    <!-- 降低阈值并调整边距 -->
    <ScrollReveal :threshold="0.1">
      <template #content>
        <section id="photo-gallery" class="py-20 px-4 md:px-8 bg-neutral-900">
          <PhotoGallery />
        </section>
      </template>
      <template #skeleton>
        <section class="py-20 px-4 md:px-8 bg-neutral-900">
          <div class="container mx-auto">
            <div class="mb-12">
              <div class="h-10 w-48 rounded-md skeleton mb-4"></div>
              <div class="h-6 w-86 rounded-md skeleton"></div>
            </div>
            <div class="h-[400px] rounded-lg skeleton"></div>
          </div>
        </section>
      </template>
    </ScrollReveal>

    <!-- 降低阈值并调整边距 -->
    <ScrollReveal :threshold="0.1" :rootMargin="'0px 0px 0px 0px'">
      <template #content>
        <section id="group-events" class="py-20 px-4 md:px-8 bg-neutral-900">
          <GroupEvents />
        </section>
      </template>
      <template #skeleton>
        <section class="py-20 px-4 md:px-8 bg-neutral-900">
          <div class="container mx-auto">
            <div class="mb-12">
              <div class="h-10 w-48 rounded-md skeleton mb-4"></div>
              <div class="h-6 w-86 rounded-md skeleton"></div>
            </div>
            <div class="h-[400px] rounded-lg skeleton"></div>
          </div>
        </section>
      </template>
    </ScrollReveal>

    <ScrollReveal :threshold="0.1">
      <template #content>
        <section id="message-trend" class="py-20 px-4 md:px-8 bg-neutral-800/50">
          <MessageTrend />
        </section>
      </template>
      <template #skeleton>
        <section class="py-20 px-4 md:px-8 bg-neutral-800/50">
          <div class="container mx-auto">
            <div class="mb-12">
              <div class="h-10 w-48 rounded-md skeleton mb-4"></div>
              <div class="h-6 w-86 rounded-md skeleton"></div>
            </div>
            <div class="h-[400px] rounded-lg skeleton"></div>
          </div>
        </section>
      </template>
    </ScrollReveal>
    <Footer />
  </div>
</template>

<script setup>
import Header from '../components/Header.vue'
import MessageCloud from '../components/MessageCloud.vue'
import ActiveMembers from '../components/ActiveMembers.vue'
import MessageTrend from '../components/MessageTrend.vue'
import Footer from '../components/Footer.vue'
import ScrollReveal from "@/components/ScrollReveal.vue";
import {onMounted, onUnmounted, ref} from "vue";
import GroupEvents from "@/components/GroupEvents.vue";
import PhotoGallery from "@/components/PhotoGallery.vue";

// 为调试添加滚动位置显示
const scrollPosition = ref(0);
const updateScrollPosition = () => {
  scrollPosition.value = window.scrollY;
};

onMounted(() => {
  window.addEventListener('scroll', updateScrollPosition);
});

onUnmounted(() => {
  window.removeEventListener('scroll', updateScrollPosition);
});
</script>

<style scoped>
/* 全局样式 */
html {
  scroll-behavior: smooth;
}

/* 调试用滚动位置指示器 */
.debug-scroll-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  z-index: 100;
  font-size: 14px;
}
</style>
